<template>
  <a-list
    itemLayout='horizontal'
    :dataSource='data'
  >
    <a-list-item slot='renderItem' slot-scope='item, index' :key='index'>
      <a-list-item-meta>
        <a slot='title'>{{ item.title }}</a>
        <span slot='description'>
          <span class='security-list-description'>{{ item.description }}</span>
          <span v-if='item.value'> : </span>
          <span class='security-list-value'>{{ item.value }}</span>
        </span>
      </a-list-item-meta>
      <template v-if='item.actions'>
        <a slot='actions' @click='item.actions.callback'>{{ item.actions.title }}</a>
      </template>
    
    </a-list-item>
    
    <a-modal
      title="修改密码"
      :visible="changPwdVisible"
      :maskClosable='false'
      okText='修改密码'
      cancelText='取消修改'
      :centered='true'
      :confirm-loading="confirmChangPwdLoading"
      @ok="handleOk"
      @cancel="changPwdVisible = false"
    >
      <a-form
        :label-col="{ span: 6 }"
        :form='form'
        :wrapper-col="{ span: 15 }"
        formLayout='horizontal'>
        <a-form-item label='旧密码'>
          <a-input-password
            v-decorator="['oldPassword',{rules: [{ required: true, message: '旧密码不能为空' }]}]"
            placeholder='请输入旧密码'>
            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
          </a-input-password>
        </a-form-item>
  
        <a-form-item label='新密码'>
          <a-input-password
            v-decorator="['newPassword',{rules: [{ required: true, message: '新密码不能为空' }]}]"
            placeholder='请输入新密码'>
            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
          </a-input-password>
        </a-form-item>
  
        <a-form-item label='确认密码'>
          <a-input-password
            v-decorator="['confirmPassword',{rules: [{ required: true, message: '确认密码密码不能为空' }]}]"
            placeholder='请输入新密码'>
            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
          </a-input-password>
        </a-form-item>
        
      </a-form>
      

    </a-modal>
    
    
  </a-list>
</template>

<script>
import { changPwd } from '@/api/common'

export default {
  data(){
    return {
      changPwdVisible: false,
      confirmChangPwdLoading: false,
      form: this.$form.createForm(this, { name: 'changPwd' }),
    }
  },
  methods:{
    showChangPwdModal() {
      this.changPwdVisible = true
    },
    handleOk(e) {
      this.confirmChangPwdLoading = true
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // 修改密码
          changPwd(values).then(() => {
            this.$message.success("修改成功")
            this.changPwdVisible = false
          })
        }
      })
      this.confirmChangPwdLoading = false
    },
  },
  computed: {
    data() {
      return [
        {
          title: '账户密码',
          description: '当前密码强度',
          value: '中等',
          actions: {
            title: '修改密码', callback: () => {
              this.showChangPwdModal()
            }
          }
        }
      ]
    }
  }
}
</script>

<style scoped>

</style>
